{% block sw_product_detail_variants %}
<div class="sw-product-detail-variants">

    {% block sw_product_detail_variants_sw_card_generated_variants %}
    <mt-card
        class="sw-product-detail-variants__generated-variants"
        position-identifier="sw-product-detail-variants-generated-variants"
        :class="{'is--loading': isLoading}"
        :title="$tc('sw-product.variations.generatedVariationCardTitle')"
        large
    >
        <template
            v-if="!isLoading && propertiesAvailable"
            #tabs
        >
            <sw-tabs
                position-identifier="sw-variant-card-tabs"
                :small="false"
                :default-item="defaultTab"
                @new-item-active="setActiveTab($event.name)"
            >
                <sw-tabs-item
                    name="all"
                    :active-tab="activeTab"
                >
                    {{ $tc('sw-product.variations.variationCard.tabs.allProducts') }}
                </sw-tabs-item>

                <sw-tabs-item
                    name="is-physical"
                    :active-tab="activeTab"
                >
                    {{ $tc('sw-product.variations.variationCard.tabs.physicalProducts') }}
                </sw-tabs-item>

                <sw-tabs-item
                    name="is-download"
                    :active-tab="activeTab"
                >
                    {{ $tc('sw-product.variations.variationCard.tabs.digitalProducts') }}
                </sw-tabs-item>
            </sw-tabs>
        </template>

        <sw-skeleton v-if="isLoading" />

        {% block sw_product_detail_variants_sw_card_empty_state %}
        <sw-empty-state
            v-if="!isLoading && !propertiesAvailable"
            class="sw-product-detail-variants__generated-variants-empty-state"
            :absolute="false"
            :title="$tc('sw-product.variations.emptyStatePropertyTitle')"
            :subline="$tc('sw-product.variations.emptyStatePropertyDescription')"
        >

            <template #icon>
                {% block sw_product_properties_empty_state_image %}
                <img
                    :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                    :alt="$tc('sw-product.properties.titleEmptyState')"
                >
                {% endblock %}
            </template>

            <template #actions>
                {% block sw_product_properties_empty_state_button_property %}
                <mt-button
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('product.editor'),
                        showOnDisabledElements: true
                    }"
                    ghost
                    :disabled="!acl.can('product.editor')"
                    variant="secondary"
                    @click="openAddPropertiesModal"
                >
                    {{ $tc('sw-product.properties.buttonAddProperties') }}
                </mt-button>
                {% endblock %}
            </template>
        </sw-empty-state>
        {% endblock %}

        {% block sw_product_detail_variants_sw_card_generated_variants_overview %}
        <sw-product-variants-overview
            v-if="product.id"
            v-show="variantListHasContent && !isLoading"
            ref="generatedVariants"
            :product-states="currentProductStates"
            :groups="groups"
            :selected-groups="configSettingGroups"
            :product-entity="productEntity"
            @variants-finish-update="updateVariantListHasContent"
            @generator-open="openModal('variantGeneration')"
            @delivery-open="openModal('deliveryModal')"
        />
        {% endblock %}

        {% block sw_product_detail_variants_sw_card_empty_state_variant %}
        <sw-empty-state
            v-if="!isLoading && propertiesAvailable && variants.length === 0"
            class="sw-product-detail-variants__generated-variants-empty-state"
            :absolute="false"
            :title="$tc('sw-product.variations.emptyStateTitle')"
            :subline="$tc('sw-product.variations.emptyStateDescription')"
        >

            <template #icon>
                {% block sw_product_properties_empty_state_image %}
                <img
                    :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                    :alt="$tc('sw-product.properties.titleEmptyState')"
                >
                {% endblock %}
            </template>

            <template #actions>
                {% block sw_product_properties_empty_state_button %}
                <mt-button
                    v-tooltip="{
                        message: $tc('sw-privileges.tooltip.warning'),
                        disabled: acl.can('product.creator'),
                        showOnDisabledElements: true
                    }"
                    class="sw-product-detail-variants__generated-variants-empty-state-button"
                    ghost
                    :disabled="!acl.can('product.creator')"
                    variant="secondary"
                    @click="openModal('variantGeneration')"
                >
                    {{ $tc('sw-product.variations.emptyStateButton') }}
                </mt-button>
                {% endblock %}
            </template>
        </sw-empty-state>
        {% endblock %}
    </mt-card>
    {% endblock %}

    {% block sw_product_detail_variants_modal_variant_generation %}
    <sw-product-modal-variant-generation
        v-if="activeModal === 'variantGeneration'"
        :product="productEntity"
        :groups="groups"
        :actual-status="activeTab"
        :selected-groups="configSettingGroups"
        @modal-close="activeModal = ''"
        @variations-finish-generate="updateVariations"
    />
    {% endblock %}

    {% block sw_product_detail_variants_modal_delivery %}
    <sw-product-modal-delivery
        v-if="activeModal === 'deliveryModal'"
        :product="productEntity"
        :selected-groups="configSettingGroups"
        @configuration-close="onConfigurationClosed"
        @modal-close="activeModal = ''"
    />
    {% endblock %}

    {% block sw_product_properties_add_properties_modal %}
    <sw-product-add-properties-modal
        v-if="showAddPropertiesModal"
        :new-properties="newProperties"
        @modal-cancel="onCancelAddPropertiesModal"
        @modal-save="onSaveAddPropertiesModal"
    />
    {% endblock %}
</div>
{% endblock %}
